<template>
	<view>
		<view class="head-card">
			<u-avatar class="logo" :text="userDetail.user_name.charAt(0).toUpperCase()" fontSize="40"
				size="large"></u-avatar>

			<view class="prompt">
				<p>{{userDetail.user_name}}</p>
			</view>
		</view>
		<view class="info">
			<!-- <template v-for="item in transformed">
				<ListItem :title='item.name' :value='item.value' width="686rpx"></ListItem>
			</template> -->
			<ListItem title='Name' :value='userDetail.real_name||"---"' width="686rpx"></ListItem>
			<ListItem title='Graduation Year' :value='userDetail.year||"---"' width="686rpx"></ListItem>
			<ListItem title='School' :value='userDetail.school||"---"' width="686rpx"></ListItem>
			<ListItem title='Email' :value='userDetail.email||"---"' width="686rpx"></ListItem>
			<ListItem title='Phone' :value='userDetail.phone||"---"' width="686rpx"></ListItem>
			<ListItem title='WeChatId' :value='userDetail.wechat_id||"---"' width="686rpx"></ListItem>
			
			<!-- <u-cell-group>
				<u-cell class="payment" title="我的薪酬" value="12451.00" center :border="false"></u-cell>
				
				<template v-for="item in 3">
					<u-cell class="contact" title="联系方式" value="12451.00" center :border="false"></u-cell>
				</template>
			</u-cell-group> -->
		</view>
		<u-button text="退出登录" color="#88a8ce" @click="quit"></u-button>
	</view>
</template>

<script>
	import loginApi from '@/api/login.js'
	import ListItem from '@/components/basicListItem/particulars/particulars.vue'
	export default {
		components: {
			ListItem
		},
		computed: {
			userDetail() {
				// return  uni.getStorageSync('userId')

				return this.$store.state.userDetail
			}
		},
		data() {
			return {
				transformed: []
			}
		},
		onLoad() {
			// this.changeArray()
		},
		methods: {
			changeArray() {
			  const extractList = ['real_name', 'role_id', 'school', 'major', 'year', 'email', 'phone', 'wechat_id', 'class_hour'];
			  this.transformed = Object.entries(this.userDetail).reduce((acc, [key, value]) => {
			    // if (extractList.includes(key)) {
			      acc.push({
			        name: key,
			        value:value?value:'---'
			      });
			    // }
			    return acc;
			  }, []);
			},
			quit(btn) {
				loginApi.logout().then(res => {
					if ((res.status == 200)) {
						uni.clearStorageSync();
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #F5F5F5;

	}

	.head-card {
		position: relative;
		width: 686rpx;
		height: 300rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 100rpx;
	}

	.logo {
		position: absolute;
		top: 24rpx;
		left: 262rpx;
		width: 162rpx;
		height: 162rpx;
		border-radius: 81rpx;
	}

	.prompt {
		position: absolute;
		top: 198rpx;
		width: 686rpx;
		height: 300rpx;
		text-align: center;
	}

	.info {

		margin: 50rpx 0;
		/* padding: 28rpx 20rpx 0; */
		/* background: #FFFFFF; */
		border-radius: 10rpx;
	}

	.info .payment {
		height: 82rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 22rpx;
	}

	.info .contact {
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 22rpx;
	}
</style>